$(function () {
    let q = {
        pagenum: 1, //	是	int	页码值
        pagesize: 3, //	是	int	每页显示多少条数据
        cate_id: '', //	否	string	文章分类的 Id
        state: '', //	否	string	文章的状态，可选值有：已发布、草稿
    }

    initArticleList()

    function initArticleList() {
        axios({
            url: '/my/article/list',
            params: q
        }).then(({
            data: res
        }) => {
            if (res.status != 0) {
                return layer.msg(res.message)
            }
            let arr = []
            res.data.forEach(ele => {
                arr.push(`
                <tr>
                    <td>${ele.title}</td>
                    <td>${ele.cate_name}</td>
                    <td>${formDate(ele.pub_date)}</td>
                    <td>${ele.state}</td>
                    <td>
                        <button data-id="${ele.Id}" class="layui-btn layui-btn-xs">编辑</button>
                        <button data-id="${ele.Id}" class="btn-del layui-btn layui-btn-xs layui-btn-danger">删除</button>
                    </td>
                </tr>
                `)
            })
            // 循环结束后 赋值
            $('tbody').empty().html(arr.join(''))
            // 分页
            renderPage(res.total)
        })
    }

    // 需求2：渲染筛选中的文章类别列表
    let form = layui.form;
    initArtCateList();

    function initArtCateList() {
        axios({
            url: "/my/article/cates",
        }).then(({
            data: res
        }) => {
            if (res.status != 0) {
                return layer.msg(res.message);
            }
            let arr = ['<option value="">请选择文章所属分类</option>'];
            res.data.forEach((ele) => {
                arr.push(`
                <option value="${ele.Id}">${ele.name}</option>
                `);
            });

            let str = arr.join('')
            $('[name=cate_id]').empty().html(str)
            form.render()
        });
    }


    // 需求3：筛选
    $('#searchForm').on('submit', function (e) {
        e.preventDefault()
        q.cate_id = $('[name = cate_id]').val()
        q.state = $('[name = state]').val()
        initArticleList()
    })

    // 需求4:分页
    function renderPage(total) {
        let laypage = layui.laypage
        // 执行一个laypage实例
        laypage.render({
            elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            limit: q.pagesize, // 每页显示几条
            curr: q.pagenum, //默认打开第几页
            // 页面加载的时候,页码切换的时候触发,每页显示条数改变的时候会触发
            // 显示区域
            layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
            limits: [2, 3, 5, 10],
            jump: function (obj, first) {
                // obj包含了当前分页的所有参数
                console.log(obj.curr) //得到当前页,以便向服务端请求对应的数据
                console.log(obj.limit) // 得到每页显示的条数
                //   layui 官网能够查到页码切换触动的事件jump()
                //   首次不执行
                if (!first) {
                    // 把当前也改变,重新渲染文章列表
                    q.pagenum = obj.curr
                    q.pagesize = obj.limit
                    initArticleList()
                }
            }
        })
    }

    // 需求5：删除文章
    $('body').on('click', '.btn-del', function () {
        let id = $(this).attr('data-id')
        layer.confirm('是否确定删除改文章?', {
            icon: 3,
            title: '提示'
        }, function (index) {
            axios({
                url: '/my/article/delete/' + id
            }).then(({
                data: res
            }) => {
                if (res.status != 0) {
                    return layer.msg(res.message)
                }
                layer.msg('删除文章成功')
                // 删除ajax成功后，再次发起请求时，若页面中还有一条数据，当前页-- ， 且只有当前页大于等于2才能--
                // 优化  短路运算 前面代码满足条件，后面的才会执行
                $('.btn-del').length == 1 && q.pagenum >= 2 && q.pagenum--
                initArticleList()
            })
            layer.close(index);
        });
    })
})